<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="icon" href="/static/image/code.png">
</head>
<body class="body">

<div class="layui-row layui-col-space12">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <!-- 表格 -->
        <table id="dictTable" lay-filter="dictTable"></table>
        <!-- 表格工具栏 -->
        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add">添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除
                </button>
                <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新表格
                </button>
            </div>
        </script>
    </div>
</div>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="copy">复制同类型数据</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/module.js"></script>
<script type="text/javascript">
    // layui方法
    layui.use(['form', 'table', 'layer', 'comm'], function () {

        // 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , $ = layui.jquery
            , comm = layui.comm;

        var tableData = new Array();
        var ids = new Array();

        var renderTable = function () {
            table.render({
                elem: '#dictTable'
                , toolbar: '#toolbar'
                , height: comm.getFullHeight()
                , cols: [
                    [
                        {checkbox: true},
                        {field: 'dictKey', title: '字典编码', width: '15%'},
                        {field: 'dictValue', title: '字典值', width: '15%'},
                        {field: 'typeCode', title: '字典类型编码', width: '15%'},
                        {field: 'typeName', title: '字典类型名称', width: '15%'},
                        {field: 'sort', title: '排序号', width: '5%'},
                        {
                            fixed: 'right',
                            title: '操作',
                            width: '20%',
                            align: 'center',
                            toolbar: '#barOption'
                        }
                    ]
                ]
                , url: '/dict/queryAll'
                , id: 'id'
                , method: 'get'
                , page: true
                , limits: [30, 60, 90, 150, 300]
                , limit: 30
                , loading: false
                , done: function (res) {
                    tableData = res.data;
                }
            });
        }

        renderTable();

        //头工具栏事件
        table.on('toolbar(dictTable)', function (obj) {
            switch (obj.event) {
                case 'add':
                    addDict();
                    break;
                case 'delete':
                    delDict(null);
                    break;
                case 'refresh':
                    renderTable();
                    break;
            }
        });

        table.on('checkbox(dictTable)', function (obj) {
            if (obj.checked == true) {
                if (obj.type == 'one') {
                    ids.push(obj.data.id);
                } else {
                    for (var i = 0; i < tableData.length; i++) {
                        ids.push(tableData[i].id);
                    }
                }

            } else {
                if (obj.type == 'one') {
                    for (var i = 0; i < ids.length; i++) {
                        if (ids[i] == obj.data.id) {
                            ids.splice(i, 1);
                        }
                    }
                } else {
                    for (var i = 0; i < ids.length; i++) {
                        for (var j = 0; j < tableData.length; j++) {
                            if (ids[i] == tableData[j].id) {
                                ids.splice(i, 1);
                            }
                        }
                    }
                }
            }
        });


        //监听工具条
        table.on('tool(dictTable)', function (obj) {

            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                delDict(data.id);
            } else if (layEvent === 'edit') {
                editDict(data);
            } else if (layEvent === 'copy') {
                data.id = null;
                comm.post('/dict/editDict?oper=0', data, function (respData) {
                    if (respData.code == 0) {
                        // 提示成功
                        layer.msg("操作成功");
                        // 刷新表格
                        renderTable();
                    }
                });
            }
        });

        /**
         * 添加字典数据
         */
        function addDict() {
            document.getElementById("dictDetailForm").reset();
            comm.open($('#dictDetail'), function (index, layero) {
                var formData = comm.getFormData('dictDetailForm');
                comm.post('/dict/editDict?oper=0', formData, function (respData) {
                    if (respData.code == 0) {
                        // 提示成功
                        layer.msg("操作成功");
                        // 关闭弹框
                        layer.close(index);
                        // 刷新表格
                        renderTable();
                    }
                });
            });
        }

        /**
         * 编辑字典数据
         *
         * @param data 数据
         */
        function editDict(data) {
            $('#dictKey').val(data.dictKey);
            $('#dictValue').val(data.dictValue);
            $('#typeCode').val(data.typeCode);
            $('#typeName').val(data.typeName);
            $('#sort').val(data.sort);

            comm.open($('#dictDetail'), function (index, layero) {
                var formData = comm.getFormData('dictDetailForm');
                formData.id = data.id;
                comm.post('/dict/editDict?oper=1', formData, function (respData) {
                    if (respData.code == 0) {
                        // 提示成功
                        layer.msg("操作成功");
                        // 关闭弹框
                        layer.close(index);
                        // 刷新表格
                        renderTable();
                    }
                });
            })

        }

        /**
         * 删除字典数据
         *
         * @param id
         */
        function delDict(id) {
            var requestParam;
            if (id == null) {
                if (ids.length == 0) {
                    layer.msg("至少选择一条记录");
                    return;
                }
                requestParam = {
                    ids: ids
                }
            } else {
                requestParam = {
                    id: id
                }
            }

            layer.confirm("确认删除吗？", function (index, layero) {
                comm.post('/dict/editDict?oper=2', requestParam, function (respData) {
                    if (respData.code == 0) {
                        // 提示成功
                        layer.msg("操作成功");
                        // 关闭弹框
                        layer.close(index);
                        // 刷新表格
                        renderTable();
                    }
                })
            });
        }
    });


</script>
</body>
<div id="dictDetail" style="display: none">
    <div class="layui-col-xs11 layui-col-sm11 layui-col-md11">
        <form id="dictDetailForm" class="layui-form" action="">
            <div class="layui-form-item">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字典编码</label>
                <div class="layui-input-block">
                    <input type="text" id="dictKey" name="dictKey" lay-verify="dictKey"
                           autocomplete="off"
                           placeholder="请输入字典编码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字典值</label>
                <div class="layui-input-block">
                    <input type="text" id="dictValue" name="dictValue"
                           lay-verify="dictValue"
                           autocomplete="off"
                           placeholder="请输入字典值" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字典类型编码</label>
                <div class="layui-input-block">
                    <input type="text" id="typeCode" name="typeCode" lay-verify="typeCode"
                           autocomplete="off"
                           placeholder="请输入字典类型编码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字典类型名称</label>
                <div class="layui-input-block">
                    <input type="text" id="typeName" name="typeName" lay-verify="typeName"
                           autocomplete="off"
                           placeholder="请输入字典类型名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序号</label>
                <div class="layui-input-block">
                    <input type="text" id="sort" name="sort" lay-verify="number"
                           autocomplete="off"
                           placeholder="请输入排序号" maxlength="3" class="layui-input">
                </div>
            </div>
        </form>
    </div>
</div>
</html>